HTML - tags - textarea tag

revision: January 28, 2025

Content

"textarea" tag : defines multi-line text input control

The <textarea> tag defines a multi-line text input control. The element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the "cols" and "rows" attributes (or with CSS).

The "name" attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted). The "id" attribute is needed to associate the text area with a label. Always add the "label" tag for best accessibility practices!

Attributes: the <textarea> element supports the global attributes and events attributes.Specific attributes are:

autofocus ; value: autofocus;

specifies that a text area should automatically get focus when the page loads.

cols ; value: number;

specifies the visible width of a text area.

dirname ; value: textareaname.dir;

specifies that the text direction of the textarea will be submitted.

disabled ; value: disabled;

specifies that a text area should be disabled.

form ; value: form_id;

specifies which form the text area belongs to.

maxlength ; value: number;

specifies the maximum number of characters allowed in the text area.

name ; value: text;

specifies a name for a text area.

placeholder ; value: text;

specifies a short hint that describes the expected value of a text area.

readonly ; value: readonly;

specifies that a text area should be read-only.

required ; value: required:

specifies that a text area is required/must be filled out.

rows ; value: number;

specifies the visible number of lines in a text area; .

wrap ; value: hard, soft;

specifies how the text in a text area is to be wrapped when submitted in a form.

Syntax

<textarea> . . . </textarea>

some examples

                  <form style="margin-left:4vw;" action = "/cgi-bin/hello_get.cgi" method = "get">             
                      Fill the Detail: <br />
                      <textarea rows = "5" cols = "50" name = "description">
                        Enter your name
                      </textarea>
                      <input type = "submit" value = "submit" />
                  </form>
              

                  <label style="margin-left: 4vw;" for="story">Tell us your story:</label>
                  <textarea id="story" name="story" rows="5" cols="33">
                      It was a dark and stormy night...
                  </textarea>